<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
       <span class="leftTitle">优惠劵</span>
      <el-row :gutter="20">
        <search-panel
          v-slot="{ form }"
          @search="search"
          :showAddButton="!receiveCoupons"
          @insert="addService"
          addTitle="优惠卷发放"
          :addPer="'coupon:save'"
          :selectPer="'coupon:page'"
        >
          <el-form-item label="">
            <el-select
              clearable
              style="width: 180px"
              placeholder="优惠券状态"
              v-model="form.status"
            >
              <el-option
                v-for="item in dict['优惠卷状态']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label=""
            v-if="!receiveCoupons"
          >
            <el-date-picker
              v-model="timeList"
              type="datetimerange"
              start-placeholder="有效期开始日期"
              end-placeholder="有效期结束日期"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label=""
            v-if="!receiveCoupons"
          >
            <el-select
              clearable
              style="width: 180px"
              placeholder="渠道类型"
              v-model="form.ditchType"
            >
              <el-option
                v-for="item in dict['渠道类型']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
        </search-panel>
      </el-row>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="receiveCoupons?receiveCouponsAttributes:tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="130"
        @row-dblclick="handleDataAfferentChange"
      >
        <template #action="{ row }">
          <!-- <i
            class="el-icon-edit"
            title="编辑"
            style="cursor: pointer"

            v-if="!receiveCoupons"
            @click="handleDataAfferentChange(row,'编辑优惠卷')"
          ></i> -->
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"
            v-permission="'coupon:del'"
            v-if="!receiveCoupons"
            @click="handleDataDelete(row)"
          ></i>
          <el-button
            v-if="receiveCoupons"
            type="success"
            size="mini"
            v-permission="'coupon:getCoupon'"
            @click="receive(row)"
          >领取</el-button>

        </template>
      </data-table>
      <!--工具条-->
    </template>
    <template #dialog>
      <dialog-data-form
        :value="dialogData"
        @operate="handleDataOperate"
      />
    </template>
  </base-layout>
</template>

<script>
import {
  couponList,
  addCoupon,
  deleteCoupon,
  editCoupon,
  getCouponById,
  couponGetCoupon
} from '@/api/after-sale/client/coupon'
import baseMixin from '@/mixins/base'
import ElFormItem from 'element-ui/packages/form/src/form-item.vue'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
import DialogDataForm from './components/DialogDataForm.vue'
import { getDict, parseTimeToYMDHMS } from '@/utils'

export default {
  components: {
    ElCol,
    ElRow,
    ElFormItem,
    DialogDataForm
  },
  props: {
    //组件是否伟领取优惠劵状态
    receiveCoupons: {
      type: Boolean,
      default: false,
    },
    //客户id
    clientId: {
      type: Number | String,
    }
  },
  mixins: [
    baseMixin({
      findData: couponList,
      addData: addCoupon,
      deleteData: deleteCoupon,
      updateData: editCoupon,
      findDataById: getCouponById,
      dataName: ['content', 'totalRecords'],
      isAdd: false,
      idName: 'id'
    })
  ],
  data () {
    return {
      timeList: [], // 主页时间查询条件
      dialogWidth: '900px',
      dict: {},
      receiveCouponsAttributes: [
        // { name: '优惠劵编号', value: 'name', type: 'text' },
        { name: '名称', value: 'name', type: 'text' },
        {
          name: '有效期', value: '', type: 'render', render: (row) => {
            if (row.expireDay) {
              return `领取后${row.expireDay}天过期`
            } else {
              return row.validEndTime
            }
          }
        },
        { name: '消费满', value: 'discountPrice', type: 'text' },
        { name: '抵扣金额', value: 'denomination', type: 'text' }, 
        { name: '适用门店', value: 'storeName', type: 'text' },
        { name: '渠道类型', value: 'ditchType', type: 'text' },
        { name: '优惠券分类', value: 'classify', type: 'text' },
        { name: '优惠券类型', value: 'type', type: 'text' },
      ],
      tableColumnAttributes: [
        { name: '名称', value: 'name', type: 'text' },
        {
          name: '有效期', value: '', type: 'render', render: (row) => {
            if (row.expireDay) {
              return `领取后${row.expireDay}天过期`
            } else {
              return row.validEndTime
            }
          }
        },
        { name: '消费满', value: 'discountPrice', type: 'text' }, 
        { name: '抵扣金额', value: 'denomination', type: 'text' }, 
        { name: '适用门店', value: 'storeName', type: 'text' },
        { name: '渠道类型', value: 'ditchType', type: 'text' },
        { name: '优惠券分类', value: 'classify', type: 'text' },
        { name: '优惠券类型', value: 'type', type: 'text' },
        { name: '数量', value: 'gross', type: 'text' },
        { name: '领取数量', value: 'receiveNum', type: 'text' },
        { name: '发放人', value: 'userName', type: 'text' },
        { name: '发放时间', value: 'createTime', type: 'text' },
        { name: '优惠券状态', value: 'status', type: 'text' }
      ]
    }
  },
  async created () {
    this.dict = getDict(['优惠卷状态', '渠道类型'])
  },
  methods: {
    //领取优惠劵
    receive (row) {
      couponGetCoupon({
        clientId: this.clientId,
        couponId: row.id,
      }).then(res => {
        let { success } = res;
        if (success) {
          this.$message.success('领取成功');
          this.$emit("close")
        }
      })
    },
    // 主页查询
    search (form) {
      if (this.timeList && this.timeList.length > 0) {
        form.validStartTime = this.timeList[1]
        form.validEndTime = this.timeList[0]
      } else {
        form.validStartTime = ''
        form.validEndTime = ''
      }
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    addService () {
      this.handleDataInsert('新增优惠券')
    }
  }
}
</script>

<style lang="scss" scoped>
.vLine {
  border-left: solid 3px black;
  height: 16px;
  vertical-align: bottom;
  display: inline-block;
}
.leftTitle{
  position: absolute;
  text-align: left;
  display: inline-block;
  line-height: 58px;

}
</style>
